<template>
	<view class="main">
		<uv-sticky ref="backTop" top="300">
			<view class="muif" style="background-color: #E6A23C;" v-if="!patientInfo||!patientInfo.id">
				<view class="muifi" style="width: 600rpx;text-align: center;">请选择就诊人</view>
			</view>
			<view class="muif" @click="openPatient" v-else>
				<view class="muifi">就诊人:</view>
				<view class="muifi">{{patientInfo.name}}</view>
				<view class="muifi">{{patientInfo.sex == 1 ? '男' :'女'}}</view>
				<view class="muifi">{{patientInfo.idCard}}</view>
				<view class="muifib">
					<uv-icon name="play-right-fill" color="#fff" size="18"></uv-icon>
				</view>
			</view>
			<view class="mtab">
				<view :class="['mtabi',tabIndex == o ?'mtabiA':'']" v-for="(i,o) in tabList" :key="o" @click="tabIndex = o">
					{{i}}
				</view>
			</view>
		</uv-sticky>

		<view class="mv">
			<view class="mvi" v-for="(i,o) in records" :key="o">
				<view class="mvit">
					<view class="mvitl">
						<img :style="{backgroundColor:i.img?'':'#eee'}"
							:src="i.img||'https://www.ysrs.xyz/apiI/ll/file/preview/1743090725920ff80808195d597d90195d84db4200013.png'" />
					</view>
					<view class="mvitr">
						<view class="mvitrt">{{i.doc}}<text>{{i.zhicheng}}</text></view>
						<view class="mvitrb">{{i.keshi}}</view>
					</view>
					<view class="mvitf"><text>￥{{(i.price).toFixed(2)}} </text>元</view>
				</view>

				<view class="mvic">
					<view class="mvict">预约时间：<text>{{i.date}} {{i.time}}</text></view>
					<view :class="['mvicb','mvicb'+i.type]">{{i.type_dictText}}</view>
				</view>
				<view class="mvie" @click="cancle(i)" v-if="i.type ==0">取消预约</view>
			</view>
		</view>

		<uv-picker ref="picker" :columns="columns" keyName="label" @confirm="confirmpicker"></uv-picker>
		<uv-back-top :scroll-top="scrollTop" icon="arrow-up" :customStyle="customStyle"
			:iconStyle="iconStyle"></uv-back-top>

		<uv-modal ref="canclemodal" title="取消预约" :closeOnClickOverlay="false" :showCancelButton="true"
			@confirm="confirmCancle">
			<view class="slot-content">
				<view>请确认</view>
				<view>取消 {{` ${patientInfo.name||''} ${patientInfo.idCard||''}`}}</view>
				<view>
					{{` ${cancleItem.date ||''} ${cancleItem.time||''} ${cancleItem.keshi||''} ${cancleItem.zhicheng||''} ${cancleItem.doc||''}`}}
					的挂号预约？
				</view>
			</view>
		</uv-modal>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				scrollTop: 0,
				patientList: [],
				patientInfo: {},
				tabIndex: 0,
				tabList: ['全部', '已预约', '已完成', '已过号', '已取消'],
				columns: [
					[]
				],
				customStyle: {
					backgroundColor: '#2c9b94',
				},
				iconStyle: {
					fontSize: '24rpx',
					color: '#fff',
				},
				cancleItem: {},
				records: []
			}
		},
		mounted() {
			this.getPatient()
		},
		methods: {
			// confirmCancle() {

			// },
			cancle(i) {
				this.cancleItem = i
				this.$refs.canclemodal.open();
			},
			openPatient() {
				this.$refs.picker.open();
			},
			confirmpicker(e) {
				this.patientInfo = e.value[0]
			},
			change(index) {
				this.current = index;
				this.getPatient(index)
			},
			getPatient() {
				this.patientList = [{
						name: '张三三三',
						idCard: '371102199903051154',
						sex: 1,
						cardNo: '202503250012',
						phone: 13322332233,
						id: 11,
						isBind: true
					},
					{
						name: '李四三',
						idCard: '371102199903051154',
						sex: 1,
						cardNo: '202503250012',
						phone: 13322332233,
						id: 12
					},
					{
						name: '王三五',
						idCard: '371102199903051154',
						sex: 1,
						cardNo: '202503250012',
						phone: 13322332233,
						id: 123
					},
					{
						name: '王三五',
						idCard: '371102199903051154',
						sex: 1,
						cardNo: '202503250012',
						phone: 13322332233,
						id: 113
					},
					{
						name: '王三五',
						idCard: '371102199903051154',
						sex: 1,
						cardNo: '202503250012',
						phone: 13322332233,
						id: 143
					},
					{
						name: '王三五',
						idCard: '371102199903051154',
						sex: 1,
						cardNo: '202503250012',
						phone: 13322332233,
						id: 134
					},
				]
				this.patientList.map(i => {
					this.columns[0].push({
						label: `${i.name} ${i.sex == 1 ?'男' :''} ${i.idCard}`,
						...i
					})
				})
				this.patientInfo = this.patientList.find(i => i.isBind) || {}
				this.records = [{
						id: 1,
						doc: '张大师',
						keshi: '胸外科',
						zhicheng: '副主任医师',
						price: 20,
						date: '2025-03-11',
						time: '08:45-09:00',
						type: 0,
						type_dictText: '已预约'
					},
					{
						id: 1,
						doc: '张大师',
						keshi: '胸外科',
						zhicheng: '副主任医师',
						price: 20,
						date: '2025-03-11',
						time: '08:45-09:00',
						type: 1,
						type_dictText: '已完成'
					}, {
						id: 1,
						doc: '张大师',
						keshi: '胸外科',
						zhicheng: '副主任医师',
						price: 20,
						date: '2025-03-11',
						time: '08:45-09:00',
						type: 2,
						type_dictText: '已过号'
					}, {
						id: 1,
						doc: '张大师',
						keshi: '胸外科',
						zhicheng: '副主任医师',
						price: 20,
						date: '2025-03-11',
						time: '08:45-09:00',
						type: 3,
						type_dictText: '已取消'
					},
				]
			},

		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
			// #ifdef APP-NVUE
			this.scrollTop = e.detail.scrollTop;
			// #endif
		},
	}
</script>


<style scoped lang="scss">
	.main {
		min-height: 100vh;
		padding: 20rpx;
		background: linear-gradient(to bottom, #12acee22, #2c9b9422);
	}

	.mvi {
		margin: 20rpx 20rpx 0;
		background-color: #fff;
		padding: 20rpx;
		border-radius: 12rpx;

		.mvit {
			display: flex;
			align-items: center;
			margin-top: -20rpx;
			position: relative;

			.mvitl {
				background-color: #fff;
				border-radius: 50%;
				padding: 6rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-right: 20rpx;
				position: relative;
				top: -10rpx;

				img {
					width: 80rpx;
					height: 80rpx;
					border-radius: 22rpx;
					border-radius: 50%;
				}
			}

			.mvitr {
				font-size: 28rpx;

				.mvitrt {
					font-weight: bold;
					margin-bottom: 10rpx;

					text {
						font-weight: normal;
						display: inline-block;
						margin-left: 20rpx;
						color: #666;
					}
				}

				.mvitrb {
					color: #444;
				}
			}

			.mvitf {
				position: absolute;
				right: 30rpx;
				display: flex;

				text {
					display: inline-block;
					margin-right: 10rpx;
					color: #F56C6C;
				}
			}
		}

		.mvic {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-top: 20rpx;

			.mvict {
				font-size: 30rpx;
				color: #444;

				text {
					color: #000;
				}
			}

			.mvicb {
				border-radius: 12rpx;
				color: #fff;
				font-size: 30rpx;
				padding: 0 10rpx;
			}

			.mvicb0 {
				background-color: #E6A23C;
			}

			.mvicb1 {
				background-color: #409EFF;
			}

			.mvicb2 {
				background-color: #F56C6C;
			}

			.mvicb3 {
				background-color: #909399;
			}
		}

		.mvie {
			color: #fff;
			background-color: #E6A23C;
			margin-top: 20rpx;
			text-align: center;
			border-radius: 8rpx;
			padding: 10rpx 0;
		}
	}


	.mtab {
		border-radius: 30rpx;
		overflow: hidden;
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 40rpx;
		padding: 15rpx 5rpx;
		background-color: #fff;
		margin-top: 20rpx;

		.mtabi {
			width: 25%;
			text-align: center;
			padding: 10rpx 0;
			font-size: 26rpx;
			transition: all .3s;
			border-radius: 30rpx;
		}

		.mtabiA {
			background-color: #2c9b94;
			color: #fff;
		}
	}

	.muif {
		display: flex;
		align-items: center;
		background-color: #2c9b94;
		border-radius: 12rpx;
		margin-top: 20rpx;
		color: #fff;
		padding: 20rpx;

		.muifi {
			margin-right: 30rpx;
			font-size: 28rpx;

			&:nth-of-type(2) {
				font-weight: bold;
			}
		}
	}
</style>